import React, { useState } from 'react'
import NavBar from '@/components/NavBar'
import Input from '@/components/Input'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import classNames from 'classnames'
import { useDispatch } from 'react-redux'
import { sendValidationCode, login } from '@/store/actions/login'
import { Toast } from 'antd-mobile'
import styles from './index.module.scss'
import { useLocation, useNavigate } from 'react-router-dom'
export default function Login() {
  // 获取history对象
  const navigate = useNavigate()
  // 获取location对象
  const location = useLocation()
  // 短信倒计时控制的时间数字
  const [time, setTime] = useState(0)
  const dispatch = useDispatch()
  // 使用formik绑定表单
  const form = useFormik({
    // 表单的初始值
    initialValues: {
      mobile: '',
      code: '',
    },
    // 当触发表单的提交事件的时候，会触发
    async onSubmit(values) {
      // console.log(values)
      // 触发actions里面登录的action
      try {
        await dispatch(login(values.mobile, values.code))
        Toast.show({
          icon: 'success',
          content: '登录成功',
        })
        // 判断登录时有没有携带参数
        console.log(location.state);
        if (location.state) {
          navigate(location.state.from, { replace: true })
          // history.replace(from)
        } else {
          // 跳转到首页
          navigate('/', { replace: true })
        }
      } catch (err) {}
    },
    // 表单校验
    validationSchema: Yup.object().shape({
      // 手机号码校验
      mobile: Yup.string()
        .required('手机号码必填')
        .matches(/^1[3456789]\d{9}$/, '手机号格式错误'),
      // 短信验证码校验
      code: Yup.string()
        .required('请输入验证码')
        .matches(/^\d{6}$/, '验证码6个数字'),
    }),
  })

  // 发送短信验证码
  const sendCode = async (mobile) => {
    // 防止用户多次向服务器发起无效的请求，造成服务器的压力
    if (time > 0) {
      return
    }

    if (!/^1[3456789]\d{9}$/.test(mobile)) {
      // 让错误信息显示在错误的div
      form.setTouched({
        mobile: true,
      })
      return
    }
    try {
      // 触发actions中发送数据的action
      await dispatch(sendValidationCode(mobile))
      Toast.show({
        icon: 'success',
        content: '发送短信验证码成功',
      })
      // 设置定时器的时间
      setTime(60)
      // console.log(time) // 0
      let timer = setInterval(() => {
        // 使用setTime的第二个方式(函数的形式改变数据)
        setTime((time) => {
          // 拿的是state的值
          // console.log(time) // 5
          if (time === 1) {
            clearInterval(timer)
          }
          return time - 1
        })
      }, 1000)
    } catch (err) {}
  }

  return (
    <div className={styles.root}>
      {/* 导航栏组件 */}
      <NavBar extra="...">登录</NavBar>
      {/* 主体内容部分 */}
      <div className="content">
        {/* 标题 */}
        <h3>短信登录</h3>
        <form onSubmit={form.handleSubmit}>
          {/* 手机号输入框 */}
          <div className="input-item">
            <div className="input-box">
              <Input
                type="text"
                name="mobile"
                placeholder="请输入手机号"
                autoComplete="off"
                maxLength={11}
                value={form.values.mobile}
                onChange={form.handleChange}
                onBlur={form.handleBlur}
              />
            </div>
            {/* form中有个属性 touched时一个对象，能够得到当前手指所触摸的区域*/}
            {form.errors.mobile && form.touched.mobile ? (
              <div className="validate">{form.errors.mobile}</div>
            ) : (
              ''
            )}
          </div>

          {/* 短信验证码输入框 */}
          <div className="input-item">
            <div className="input-box">
              <Input
                name="code"
                placeholder="请输入验证码"
                maxLength={6}
                autoComplete="off"
                extra={time > 0 ? `${time}后获取` : '获取验证码'}
                onExtraClick={() => sendCode(form.values.mobile)}
                value={form.values.code}
                onChange={form.handleChange}
                onBlur={form.handleBlur}
              />
            </div>
            {form.errors.code && form.touched.code ? (
              <div className="validate">{form.errors.code}</div>
            ) : (
              ''
            )}
          </div>

          {/* 登录按钮 */}
          <button
            type="submit"
            className={classNames('login-btn', { disabled: !form.isValid })}
          >
            登录
          </button>
        </form>
      </div>
    </div>
  )
}
